<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" style="height: 100%;padding: 0;margin: 0;" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>角色管理</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/default/easyui.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/themes/icon.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/easyui/demo/demo.css}"/>
    <script type="text/javascript" th:src="@{/easyui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/jquery.easyui.min.js}"></script>
    <script type="text/javascript" th:src="@{/easyui/locale/easyui-lang-zh_CN.js}"></script>
</head>
<body style="height: 100%;width: 100%;padding: 0;margin: 0;">
<table id="tt" title="角色列表" style="width:100%;height:100%;"
       data-options="toolbar:toolbar,rownumbers:true,singleSelect:true,pagination:true,url:'/sys/role/list',method:'post'">
    <thead>
    <tr>
        <th field="id" checkbox="true"></th>
        <th field="name" width="50%">角色名称</th>
        <th field="enable" width="49%" formatter="formatEnable">是否有效</th>
    </tr>
    </thead>
</table>


<script type="text/javascript">
    function formatEnable(value) {
        if (value == 1) {
            return '有效';
        } else {
            return '无效';
        }
    }

    $(function () {
        var pager = $('#tt').datagrid().datagrid('getPager');
    })
    var toolbar = [];
</script>

<script sec:authorize="hasRole('SYS_ROLE_ADD')">
    toolbar.push('-',{
        text: '新增',
        iconCls: 'icon-add',
        handler: function () {
            $("#addNameId").textbox("setValue", '');
            $('#addEnableId').combobox("select", '1');
            $('#addDialog').dialog('open');
        }
    });
</script>

<script sec:authorize="hasRole('SYS_ROLE_MENU_UPDATE')">
    toolbar.push('-',{
        text: '分配权限',
        iconCls: 'icon-add',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                $("#hiddenMenuUpdateId").val(row.id);
                $('#menuTree').tree({
                    url: '/sys/role/roleMenu?roleId=' + row.id
                });
                $('#menuUpdateDialog').dialog('open');
            } else {
                $.messager.alert("提示", "请先选择需要分配权限的数据");
            }

        }
    });
</script>

<script sec:authorize="hasRole('SYS_ROLE_UPDATE')">
    toolbar.push('-',{
        text: '修改',
        iconCls: 'icon-save',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                var updateId = row.id;
                $("#hiddenUpdateId").val(updateId);
                $("#updateNameId").textbox("setValue", row.name);
                $('#updateEnableId').combobox('select', row.enable);
                $('#updateDialog').dialog('open');
            } else {
                $.messager.alert("提示", "请先选择需要修改的数据");
            }
        }
    });
</script>

<script sec:authorize="hasRole('SYS_ROLE_DELETE')">
    toolbar.push('-',{
        text: '删除',
        iconCls: 'icon-remove',
        handler: function () {
            var row = $('#tt').treegrid('getSelected');
            if (row) {
                $.messager.confirm('提示', '确定要删除这条记录吗?', function (res) {
                    if (res) {
                        $.post("/sys/role/deleteById", {id: row.id}, function (result) {
                            if (result == '1') {
                                console.log("success");
                                reloads();
                            } else if (result == '2') {
                                $.messager.alert("提示", "请先删除角色下所有的用户！");
                            } else {
                                $.messager.alert("提示", "删除错误");
                            }
                        });
                    }
                });
            } else {
                $.messager.alert("提示", "请先选中一条记录");
            }

        }
    });
</script>

<script type="text/javascript">
    toolbar.push('-',{
        text:'刷新',
        iconCls:'icon-reload',
        handler:reloads
    });

    function reloads() {
        $('#tt').datagrid('reload');//刷新
    }
</script>


<div id="addDialog" class="easyui-dialog" title="新增数据" maximizable="true" resizable="true"
     style="width:80%;height:450px;width:800px;padding:10px"
     data-options="title:'新增数据',modal:true,closed:true">
    <div style="margin-bottom:20px">
        <input id="addNameId" class="easyui-textbox" name="name" style="width:100%"
               data-options="label:'角色名:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <select id="addEnableId" class="easyui-combobox" name="enable" label="是否有效" style="width:30%">
            <option value="1">有效</option>
            <option value="0">无效</option>
        </select>
    </div>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('addDialog')"
           style="width:80px">取消</a>
    </div>
</div>
<script>
    function cancelForm(id) {
        $('#' + id).dialog('close');
    }

    function submitForm() {
        var name = $("#addNameId").val();
        var enable = $("#addEnableId").val();
        $.post("/sys/role/insert", {name: name, enable: enable}, function (result) {
            $('#addDialog').dialog('close');
            if (result == '1') {
                console.log("success");
                reloads();
            } else {
                $.messager.alert("提示", "操作失败");
            }
        });
    }
</script>


<div id="updateDialog" class="easyui-dialog" title="编辑数据" maximizable="true" resizable="true"
     style="width:80%;height:450px;width:800px;padding:10px"
     data-options="title:'编辑数据',modal:true,closed:true">
    <input type="hidden" id="hiddenUpdateId"/>
    <div style="margin-bottom:20px">
        <input id="updateNameId" class="easyui-textbox" name="name" style="width:100%"
               data-options="label:'菜单名:',required:true">
    </div>
    <div style="margin-bottom:20px">
        <select id="updateEnableId" class="easyui-combobox" name="enable" label="是否有效" style="width:30%">
            <option value="1">有效</option>
            <option value="0">无效</option>
        </select>
    </div>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitUpdateForm()" style="width:80px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('updateDialog')" style="width:80px">取消</a>
    </div>
</div>
<script>
    function submitUpdateForm() {
        var updateId = $("#hiddenUpdateId").val();
        ;
        var name = $("#updateNameId").val();
        var enable = $("#updateEnableId").val();
        $.post("/sys/role/update", {id: updateId, name: name, enable: enable}, function (result) {
            $('#updateDialog').dialog('close');
            if (result == '1') {
                console.log("success");
                reloads();
            } else {
                $.messager.alert("提示", "操作失败");
            }
        });
    }
</script>


<div id="menuUpdateDialog" class="easyui-dialog" title="分配权限" maximizable="true" resizable="true"
     style="width:50%;height:450px;width:800px;padding:10px"
     data-options="title:'分配权限',modal:true,closed:true">
    <input type="hidden" id="hiddenMenuUpdateId"/>
    <div style="margin-bottom:20px">
        <ul id="menuTree" class="easyui-tree" data-options="animate:true,checkbox:true"></ul>
    </div>
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitMenuUpdateForm()"
           style="width:80px">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancelForm('menuUpdateDialog')"
           style="width:80px">取消</a>
    </div>
</div>

<script>
    function submitMenuUpdateForm() {
        var s = getChecked();
        if (s === '') {
            $.messager.alert("提示", "至少选择一个菜单");
        }else{
            var roleId = $("#hiddenMenuUpdateId").val();
            $.post("/sys/role/updateRoleMenu", {roleId:roleId,menuIds:s}, function (result) {
                if (result == '1') {
                    console.log("success");
                    cancelForm('menuUpdateDialog');
                    reloads();
                } else {
                    $.messager.alert("提示", "操作错误");
                }
            });
        }
    }

    function getChecked() {
        var nodes = $('#menuTree').tree('getChecked', ['checked', 'indeterminate']);
        var s = '';
        for (var i = 0; i < nodes.length; i++) {
            if (s != '') s += ',';
            s += nodes[i].id;
        }
        return s;
    }
</script>
</body>
</html>